<template>
  <el-row>
    <el-col :span="24">
      <el-row>
        <el-col :span="4">
          <el-row>
            <el-col :span="24" style="color: gray">
              <el-row>
                <el-col :span="6">
                  <el-icon><Notebook /></el-icon>
                </el-col>
                <el-col :span="6">
                  <el-icon><Document /></el-icon>
                </el-col>
                <el-col :span="6">
                  <el-icon><Delete /></el-icon>
                </el-col>
                <el-col :span="6">
                  <el-icon><Refresh /></el-icon>
                </el-col>
                <el-col :span="24">
                  <hr>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-icon><FolderOpened /></el-icon><span>我的笔记本</span>
                </el-col>
              </el-row>
              <el-row class="row_1">
                <el-col :span="24">
                    <el-table :data="tableData" style="width: 100%;">
                      <el-table-column prop="name"/>
                    </el-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="23" :offset="1" style="overflow-y: scroll;height: 90vh">
              <div id="vditor" style="border:none;"></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">
import showPageStore from "../../store/showPageStore";
import {marked} from "marked";
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import {ref,onMounted} from "vue"
const sp = showPageStore()

const tableData = ref([{"name": "事业单位"},{"name": "公共基础知识"},{"name": "java学习笔记"},{"name": "事业单位"},{"name": "公共基础知识"},{"name": "java学习笔记"},{"name": "事业单位"},{"name": "公共基础知识"},{"name": "java学习笔记"},{"name": "事业单位"},{"name": "公共基础知识"},{"name": "java学习笔记"},{"name": "事业单位"},{"name": "公共基础知识"},{"name": "java学习笔记"},])
const text = ref("")

const vditor = ref<Vditor | null>(null);

onMounted(() => {
  vditor.value = new Vditor('vditor', {
    minHeight: 750,
  });
});

const getInput = () => {
  const editor = document.getElementById("input")
  const display = document.getElementById("display")
  display.innerHTML = marked(editor.innerText)
}

const tab = () => {
  let inputEditor = document.getElementById("input")
  inputEditor.innerText = "\t"+inputEditor.innerText
}


</script>

<style scoped>
.row_1{
  overflow-y: scroll;
  height: 80vh;
}
.input{
  font-family: "PingFang SC Medium";
  background: #f1f2f6;
  height: 90vh;
  width: 100%;
  border-radius: 20px;
  padding: 10px;
  line-height: 1.5;
}
.display{
  background: lightgray;
  height: 90vh;
  width: 100%;
  border-radius: 20px;
  padding: 5px;
}
</style>